<template>
	<view class="details">
		<view class="details-tabs">
			<tabs :list="tabs" v-model="active" :flex="true" @input="select"></tabs>
		</view>
		<scroll-view class="details-views" scroll-y @scrolltolower="loadMore">
			<view class="details-list" v-if="detailsList.length">
				<view class="details-item" v-for="(data,index) in detailsList" :key="index">
					<view class="details-item-info">
						<view>{{data.brief}}</view>
						<view>{{data.add_time}}</view>
					</view>
					<view class="details-item-number">
						<view class="status status-1" v-if="data.stauts==1">审核中</view>
						<view class="status status-2" v-if="data.stauts==2">已到账</view>
						<view class="status status-2" v-if="data.stauts==3">未通过</view>
						<view>￥{{data.money}}</view>
					</view>
				</view>
			</view>
			<nothing :text="'暂无记录'" :btn="false" v-else></nothing>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noMore: false,
				page: 0,
				active: 0,
				tabs: [{title: '待审核'},{title: '已到账'},{title: '未通过'}],
				detailsList: []
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			select(e){
				this.detailsList = []
				this.page = 0
				this.init()
			},
			init(){
				this.$api.WithdrawalLog({status: this.active+1,page: this.page,limit: 10}).then(res => {
					if(res.datas.data.length){
						res.datas.data.forEach(item => {
							this.detailsList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			loadMore(){
				if(!this.noMore){
					this.page++
					this.init()
				}
			}
		}
	}
</script>

<style lang="scss">
	.details{
		.details-tabs{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			box-shadow: 0 0 15rpx rgba(0,0,0,.2);
			border-top: solid 1px #EEE;
		}
		.details-views{
			position: fixed;
			width: 100%;
			left: 0;
			top: 90rpx;
			bottom: 0;
			padding-top: 30rpx;
			.details-item{
				background-color: #FFF;
				border-bottom: solid 1px #EEE;
				padding: 50rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.details-item-info{
					view:first-child{
						font-size: 34rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}
					view:last-child{
						font-size: 26rpx;
						color: #999;
					}
				}
				.details-item-number{
					text-align: right;
					.status{
						margin-bottom: 10rpx;
						font-size: 30rpx;
						color: #999;
						&.status-1{
							color: #FE9B26;
						}
					}
					font-size: 30rpx;
				}
			}
		}
	}
</style>